import React, { useEffect, useState } from 'react'
import './index.scss'
import T from 'prop-types'
import NavBar from '../../../components/nav-bar'
import icon from '../friend-list/icon_default_user.png'
import axios from '../../../utils/axios'
import { APPLY_STATUS } from './constant'
import qs from 'qs'
import icon_group from '../images/qun.png'
export default function ApplyList(props) {
  // 是从群聊来还是好友
  const { type } =
    qs.parse(window.location.search, { ignoreQueryPrefix: true }) || {}
  console.log(type)
  const [myApplyList, setMyApplyList] = useState([])
  const [applyList, setApplyList] = useState([])

  let baseUrl
  if (type === 'group') {
    baseUrl = 'group'
  }
  if (type === 'friend') {
    baseUrl = 'userFriend'
  }
  const toAgree = (userid, groupid, status) => {
    console.log(userid, groupid)
    let url
    if (type === 'group') {
      url = `/group/agreeMember?groupid=${groupid}&userid=${userid}&applyStatus=${status}`

    }
    if (type === 'friend') {
      url = `/userFriend/agreeFriend?userid=${userid}&applyStatus=${status}`
      console.log(url);
    }
    axios.get(url).then((res) => {
      console.log(res)
      getList()
    })
  }
  const getList = () => {
    axios.get(`/${baseUrl}/applyList`).then((res) => {
      // 申请添加我为好友的
      setApplyList(res.data.data)
      console.log(res.data.data,999)
    })
    axios.get(`/${baseUrl}/myApplyList`).then((res) => {
      // 我申请的
      console.log(res.data.data)
      setMyApplyList(res.data.data)
    })
  }
  useEffect(() => {
    getList()
  }, [])
  return (
    <>
      <div className="apply-list">
        {type === 'group' ? (
          <NavBar roomName={'群聊申请列表'} showRight={false}></NavBar>
        ) : (
          ''
        )}
        {type === 'friend' ? (
          <NavBar roomName={'好友申请列表'} showRight={false}></NavBar>
        ) : (
          ''
        )}
        <div>我申请的</div>
        {myApplyList.map((item, index) => (
          <div className="friend-item apply-item" key={item.username + index}>
            <img
              src={item.avatar || icon_group}
              alt="发生了错误"
              className="avatar"
            />
            {item.groupName}
            <div className="apply-item-right">
              {item.applyStatus === 0 ? '已申请' : ''}
              {item.applyStatus === 1 ? '已申请' : ''}
              {item.applyStatus === 2 ? '对方拒绝了你的申请' : ''}
              {item.applyStatus === 3 ? '已同意' : ''}
            </div>
          </div>
        ))}

        {type === 'group' ? <div>申请加入我的群聊</div> : ''}
        {type === 'friend' ? <div>申请添加我为好友</div> : ''}
        {applyList.map((item) => (
          <div className="friend-item apply-item">
            <img
              src={item.avatar || icon}
              alt="发生了错误"
              className="avatar"
            />
            {item.username}
            {item.applyStatus === APPLY_STATUS.SENDED ||
            item.applyStatus === APPLY_STATUS.READED ? (
              <div className="apply-item-right">
                <div
                  onClick={() => {
                    if (type === 'friend') {
                      toAgree(item.userid, null, APPLY_STATUS.AGREE)
                          console.log(item.userid, 666)
                    }
                    if (type === 'group') {
                      toAgree(item.userid, item.groupid, APPLY_STATUS.AGREE)
                      console.log(item.userid,666)
                    }
                  }}
                >
                  同意
                </div>
                <div
                  onClick={() => {
                    if (type === 'friend') {
                      toAgree(item.userid, null, APPLY_STATUS.REFUSE)
                    }
                    if (type === 'group') {
                      toAgree(item.userid, item.groupid, APPLY_STATUS.REFUSE)
                    }
                  }}
                >
                  拒绝
                </div>
              </div>
            ) : (
              ''
            )}
            {item.applyStatus === APPLY_STATUS.AGREE ? (
              <div className="apply-item-right">已同意</div>
            ) : (
              ''
            )}
            {item.applyStatus === APPLY_STATUS.REFUSE ? (
              <div className="apply-item-right">已拒绝</div>
            ) : (
              ''
            )}
          </div>
        ))}
      </div>
    </>
  )
}

ApplyList.propTypes = {}
